<form style="margin: 0 auto;">
    <h2 class="sectionTitle">
        ${Display}
    </h2>

    <div class="selectContainer languageSection hide">
        <select id="selectLanguage" is="emby-select" label="${LabelDisplayLanguage}">
            <option value="">${Auto}</option>
            <option value="ar">Arabic</option>
            <option value="be-BY">Belarusian (Belarus)</option>
            <option value="bg-BG">Bulgarian (Bulgaria)</option>
            <option value="ca">Catalan</option>
            <option value="zh-CN">Chinese Simplified</option>
            <option value="zh-TW">Chinese Traditional</option>
            <option value="zh-HK">Chinese Traditional (Hong Kong)</option>
            <option value="hr">Croatian</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="nl">Dutch</option>
            <option value="en-GB">English (United Kingdom)</option>
            <option value="en-US">English (United States)</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="fr-CA">French (Canada)</option>
            <option value="de">German</option>
            <option value="el">Greek</option>
            <option value="he">Hebrew</option>
            <option value="hi-IN">Hindi (India)</option>
            <option value="hu">Hungarian</option>
            <option value="id">Indonesian</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="kk">Kazakh</option>
            <option value="ko">Korean</option>
            <option value="lt-LT">Lithuanian</option>
            <option value="ms">Malay</option>
            <option value="nb">Norwegian Bokmål</option>
            <option value="fa">Persian</option>
            <option value="pl">Polish</option>
            <option value="pt-BR">Portuguese (Brazil)</option>
            <option value="pt-PT">Portuguese (Portugal)</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sk">Slovak</option>
            <option value="sl-SI">Slovenian (Slovenia)</option>
            <option value="es">Spanish</option>
            <option value="es-419">Spanish (Latin America)</option>
            <option value="es-MX">Spanish (Mexico)</option>
            <option value="sv">Swedish</option>
            <option value="gsw">Swiss German</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="vi">Vietnamese</option>
        </select>
        <div class="fieldDescription">
            <div>${LabelDisplayLanguageHelp}</div>
            <div class="learnHowToContributeContainer hide" style="margin-top: .25em;">
                <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LearnHowYouCanContribute}</a>
            </div>
        </div>
    </div>

    <div class="selectContainer fldDateTimeLocale hide">
        <select is="emby-select" class="selectDateTimeLocale" label="${LabelDateTimeLocale}">
            <option value="">${Auto}</option>
            <option value="ar">Arabic</option>
            <option value="be-BY">Belarusian (Belarus)</option>
            <option value="bg-BG">Bulgarian (Bulgaria)</option>
            <option value="ca">Catalan</option>
            <option value="zh-CN">Chinese Simplified</option>
            <option value="zh-TW">Chinese Traditional</option>
            <option value="zh-HK">Chinese Traditional (Hong Kong)</option>
            <option value="hr">Croatian</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="nl">Dutch</option>
            <option value="en-GB">English (United Kingdom)</option>
            <option value="en-US">English (United States)</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="fr-CA">French (Canada)</option>
            <option value="de">German</option>
            <option value="el">Greek</option>
            <option value="he">Hebrew</option>
            <option value="hi-IN">Hindi (India)</option>
            <option value="hu">Hungarian</option>
            <option value="id">Indonesian</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="kk">Kazakh</option>
            <option value="ko">Korean</option>
            <option value="lt-LT">Lithuanian</option>
            <option value="ms">Malay</option>
            <option value="nb">Norwegian Bokmål</option>
            <option value="fa">Persian</option>
            <option value="pl">Polish</option>
            <option value="pt-BR">Portuguese (Brazil)</option>
            <option value="pt-PT">Portuguese (Portugal)</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sk">Slovak</option>
            <option value="sl-SI">Slovenian (Slovenia)</option>
            <option value="es">Spanish</option>
            <option value="es-419">Spanish (Latin America)</option>
            <option value="es-MX">Spanish (Mexico)</option>
            <option value="sv">Swedish</option>
            <option value="gsw">Swiss German</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="vi">Vietnamese</option>
        </select>
    </div>

    <div class="selectContainer fldDisplayMode hide">
        <select is="emby-select" class="selectLayout" label="${LabelDisplayMode}">
            <option value="">${Auto}</option>
            <option value="desktop">${Desktop}</option>
            <option value="mobile">${Mobile}</option>
            <option value="tv">${TV}</option>
        </select>
        <div class="fieldDescription">${DisplayModeHelp}</div>
        <div class="fieldDescription">${LabelPleaseRestart}</div>
    </div>

    <div class="selectContainer">
        <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
    </div>

    <div class="selectContainer hide selectScreensaverContainer">
        <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
    </div>

    <div class="inputContainer inputContainer-withDescription">
        <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
        <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkFadein" />
            <span>${EnableFasterAnimations}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableFasterAnimationsHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
            <span>${EnableBlurHash}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableBlurHashHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkDetailsBanner" />
            <span>${EnableDetailsBanner}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableDetailsBannerHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
            <span>${Backdrops}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription fldThemeSong hide">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkThemeSong" />
            <span>${ThemeSongs}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo hide">
        <label>
            <input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />
            <span>${ThemeVideos}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div>
    </div>

    <div class="checkboxContainer checkboxContainer-withDescription fldDisplayMissingEpisodes hide">
        <label>
            <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />
            <span>${DisplayMissingEpisodesWithinSeasons}</span>
        </label>
        <div class="fieldDescription checkboxFieldDescription">${DisplayMissingEpisodesWithinSeasonsHelp}</div>
    </div>

    <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
        <span>${Save}</span>
    </button>
</form>
